<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <script src="webjars/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var staticCurrentPage=1;
            var staticPageNum;
            function displayStudent(pageNum){
                $.ajax({
                    url:"/PageProject/SelectStudentServlet",
                    type:"get",
                    dataType:"json",
                    data:{page:pageNum},
                    success:function(students){
                        $("#studentInformationTable").html("");
                        $.each(students,function(key,val){
                            $("#studentInformationTable").append("<tr class="+key+"></tr>");
                            $.each(val,function(informationName,information){
                                $("."+key).append("<td>"+information+"</td>")
                            })
                        })
                        staticCurrentPage=pageNum;

                    }
                })
            }
                $.ajax({
                    url:"/PageProject/StudentCountServlet",
                    type:"get",
                    dataType:"json",
                    success:function(studentCount){
                        staticPageNum=studentCount;

                        for(var i=1;i<=studentCount;i++){
                            $("#pageNum").append("<td><button class='page' value='"+i+"'>"+i+"</button></td>")
                        }
                        $(".page").click(function(){
                            //标签中取出的数据都是字符串类型，需要乘1变回数字类型
                            displayStudent(this.value*1);

                        })
                    }
                })
            $("#previousPage").click(function(){
                if(staticCurrentPage>1){
                    displayStudent(staticCurrentPage-1);
                }
            })
            $("#nextPage").click(function(){
                if(staticCurrentPage<staticPageNum){
                    displayStudent(staticCurrentPage+1);

                }
            })
            displayStudent(1);
            $("#jump").click(function(){
                if(1<=$("#jumpPage").val()&$("#jumpPage").val()<=staticPageNum){
                    displayStudent($("#jumpPage").val())
                }
            })

        })
    </script>
</head>
<body>
<table id="studentInformationTable">

</table>
<table>
    <tr>
       <td><button id="previousPage"><<</button></td>
        <td><span id="pageNum"></span></td>
        <td><button id="nextPage">>></button></td>
        <td>请输入要跳转的页数:</td>
        <td><input type="text" id="jumpPage"></td>
        <td><button id="jump">跳转</button></td>
    </tr>
</table>
</body>
</html>